<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>{{ category.name }}</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	{% include 'public/static_top.html' %}
	<style type="text/css">
		.book_list {
			margin-top: 50px;
		}
	</style>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">{{ category.name }}</h1>
	</header>
	
	<div class="book_list">
		<ul class="mui-table-view">
		{% for book in books %}
        <li class="mui-table-view-cell mui-media">
            <a href="{{ url('library:book_detail', args=(book.id, )) }}">
                <img class="mui-media-object mui-pull-left" src="{{ book.cover.url }}">
                <div class="mui-media-body">
                    {{ book.name }}
                    <p class="mui-ellipsis">{{ book.author }}</p>
                    <textarea disabled>{{ book.content_introduction }}</textarea>
                </div>
            </a>
        </li>
        {% endfor %}
	</ul>
	
	</div>

    {% include 'public/static_bottom.html' %}
</body>

</html>
